﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.4/js/dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.4"></script>
<!--在此引用 Server 端的 JS 檔 , 取得變數值 gtoken -->
<script src="http://sisg.ntpc.gov.tw/TokenKey/60_250_96_201.js" type ="text/javascript"></script>
<script type="text/javascript">

    var map;
    function init() {
        dojo.require("esri.map");
        map = new esri.Map("map");
        //指定服務的路俓後面，加上取得變數值 gtoken
        //取得基本底圖服務（包含公園、道路、鐵路、高鐵、街廓、縣市界、鄉鎮界、捷運等圖層）
        var mapURL = "http://sisg.ntpc.gov.tw/ArcGIS/rest/services/map/MapServer?token=" + gtoken;
        //取得其他地圖服務，請文件所列出之服務名稱取代「服務名稱」即可
        // mapURL="http://sisg.ntpc.gov.tw/ArcGIS/rest/services/服務名稱/MapServer?token="+gtoken;
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapURL));

        dojo.connect(map, "onMouseMove", showCoordinates);
        dojo.connect(map, "onMouseDrag", showCoordinates);

    }

    function showCoordinates(evt) {
        //get mapPoint from event
        var mp = evt.mapPoint;
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x.toFixed(4) + ", " + mp.y.toFixed(4);
    }

    function addPointToMap(lon, lat) {
        map.infoWindow.setTitle("Test");
        map.infoWindow.setContent("lon:" + lon + ", lat:" + lat + " <br> <a href='http://www.google.com.tw'>google</a> ");
        //
        var point = new esri.geometry.Point(lon, lat, new esri.SpatialReference({ wkid: 102443 }));
        map.infoWindow.fixedAnchor = esri.dijit.InfoWindow.ANCHOR_LOWERRIGHT;
        //
        map.infoWindow.resize(240, 150);
        //
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND;
        symbol.setSize(12);
        symbol.setColor(new dojo.Color([255, 0, 0, 10]));
        var graphic = new esri.Graphic(point, symbol);
        map.graphics.add(graphic);
        //
        map.infoWindow.show(map.toScreen(point), esri.dijit.InfoWindow.ANCHOR_LOWERRIGHT);

    }


    dojo.addOnLoad(init);
</script>
</head>
  <body class="tundra">
    <form id="form1" runat="server">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
         style="width:600px; height:600px; border:1px solid #000;">
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" >
			<span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>
		</div>
    </div>
    <br />
    <asp:TextBox ID="txtlon" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtlat" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" 
          onclientclick="addPointToMap(parseFloat(dojo.byId('txtlon').value), parseFloat(dojo.byId('txtlat').value));window.event.returnValue = false;" 
          Text="Button" onclick="Button1_Click" />
    </form>
		
  </body>
</html>
